<template>
	<view class="bg">
	<!-- 	<video style="width: 100%; height: 100vh;" :play-strategy='2' :controls='false' :show-progress='false' :autoplay='true'
			object-fit='fill' :show-fullscreen-btn='false' :show-play-btn='false'
			:src="vido"
			controls>

		</video> -->
		 <x-video ref="videoPlayer" height='90vh' :autoplay='true' :src="vido" :progress="progress" @play="videoPlay"
		                         @pause="videoPause" @ended="videoEnded" @timeupdate="videoTimeUp" @loadeddata="videoLoaded"
		                         @seeking="videoSeeking" @seeked="videoSeeked" @error="videoError"/>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				vido:'',
				 progress:0
			}
		},
		onLoad(id) {
			// this.id=id.id
			// this.getDetile(id.id)
			this.vido=id.video
		},
		
		methods: {
			getDetile(id) {
				this.$http.post('api/dynamic/detail', {
					dynamic_id: id,
				}).then(res => {
					
					this.vido = res.video
					
				
				})
			},
			 // 视频信息加载完成
			        videoLoaded(durationTime) {},
			        // 当前播放时间
			        videoTimeUp(currentTime) {},
			        // 点击原始播放
			        videoPlay() {},
			        // 正在拖动
			        videoSeeking() {},
			        // 拖动结束
			        videoSeeked() {},
			        // 触发暂停
			        videoPause() {},
			        // 播放结束
			        videoEnded() {},
			        // 播放错误
			        videoError() {}
			
	
	
		}
	}
</script>

<style  lang="scss">
	page{
			background: #000000;
	}
	// .bg{
	// 	background: #000000;
	// }
	.box {
		margin-top: 80vh;
		margin-left: 50rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* position: fixed;
		left: 0;
		bottom: 200rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #66ffcc; */
	}
</style>
